<template>
  <div class="count">
    <h2>当前累计结果为:{{  sum  }}</h2>
    <select v-model.number="n">
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
    </select>
    <button @click="add">加</button>
    <button @click="sub">减</button>
  </div>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
let sum=ref(1)
let n=ref(1)

function add(){
    sum.value+=n.value
}
function sub(){
    sum.value-=n.value
}

</script>

<style scoped>
.count{
    background-color: lightblue;
    border-radius: 6px;
    box-shadow: 6px 6px 12px gray;
    padding: 10px;

}
.count *{
    margin: 10px;
}

</style>